<script module="formatWeek" lang="wxs">
	var formatWeekFun = function(str){
		var newWeek = '';
		switch(str){
			case '星期一':
				newWeek = '周一';
				break;
			case '星期二':
				newWeek = '周二';
				break;
			case '星期三':
				newWeek = '周三';
				break;
			case '星期四':
				newWeek = '周四';
				break;
			case '星期五':
				newWeek = '周五';
				break;
			case '星期六':
				newWeek = '周六';
				break;
			case '星期日':
				newWeek = '周日';
				break;
		}
		return newWeek;
	}
	module.exports.formatWeekFun = formatWeekFun;
</script>
<script module="formatDate" lang="wxs">
	var formatDateFun = function(str,yyTag,opt){
		var newStr = '';
		if(opt == 'toDate'){
			if(yyTag == 1){
				//newStr = str.substring(5).replace(/\-/g, ".");
				newStr = str.substring(5).replace('-','.')
			}else if(yyTag == 2){
				newStr = '已满';
			}else if(yyTag == 3){
				newStr = '休息';
			}
		}else if(opt == 'toDay'){
			if(yyTag == 1){
				newStr = '上午';
			}else if(yyTag == 2){
				newStr = '下午';
			}else if(yyTag == 3){
				newStr = '晚上';
			}
		}
		return newStr;
	}
	module.exports.formatDateFun = formatDateFun;
</script>
<template>
	<view class="yyTimeWrap">
		<!-- 日期 -->
		<view class="timeList">
			<!-- :class="[currWeek == item.weekChi ? 'active' : '']" -->
			<view class="timeItem"
				:class="[item.yyTag == 2 || item.yyTag == 3 ? 'hasFull' : '', currDateIndex == index && item.yyTag == 1 || item.yyTag == 2 ? 'active' : '']"
				v-for="(item,index) in dateList"
				:key="index"
				@tap="switchWeek(index,item.yyTag)"
			> 
				<view class="week">{{currWeek == item.weekChi ? '今天' : formatWeek.formatWeekFun(item.weekChi)}}</view>
				<view class="date">{{formatDate.formatDateFun(item.workDate,item.yyTag,'toDate')}}</view>
			</view>
		</view>
		<!-- 对应每天 -->
		<view class="dayItemWrap">
			<block v-if="classTimeList.length > 0">
				<view class="dayItem"
					v-for="(item,index) in classTimeList"
					:key="index"
				>
					<view class="dayTit">
						<view>{{formatDate.formatDateFun('',item.classTag,'toDay')}}</view> 
					</view>
					<view class="timeStepList clearfix" v-if="item.classRangeList.length > 0">
						<block
							v-for="(innerItem,innerIndex) in item.classRangeList"
							:key="innerIndex"
						>
							<block v-if="innerItem.orderStatus == 1">
								<!-- 暂定可约的 包括可约和休息 -->
								<view class="timeStepItem"
									:class="[clsIndex == innerIndex && currParIndex == index && innerItem.orderStatus == 1 ? 'active' : '',innerItem.classStatus == 2 ? 'hasFull' : '']"
									@tap="selectClsTime(index,innerIndex,innerItem.classRange,innerItem.classTimeId,innerItem.classStatus)"
								>
									<block v-if="innerItem.classStatus == 1">
										{{innerItem.classRange}}
									</block>
									<block v-else-if="innerItem.classStatus == 2">
										休息
									</block>
								</view>
							</block>
							<!-- <block v-else-if="innerItem.orderStatus == 2">
								已约
							</block> -->
						</block>
					</view>
					<view v-else>
						<view class="restTag">休息</view>
					</view>
				</view>
			</block>
			<block v-else>
				<view class="restView">
					<image class="restImg" src="../../../../static/images/xlzx/rest.png"></image>
					<view>今天休息,请选择其他时间预约哟!</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			dateList:Array,
			classTimeList:Array,
			currWeek:String,
			currDateIndex:Number,
			clsIndex:Number,
			currParIndex:Number
		},
		methods:{
			switchWeek(index,yyTag){
				this.$emit('switchWeek',index,yyTag);
			},
			selectClsTime(parIndex,index,classRange,clsId,classStatus){
				this.$emit('selectClsTime',parIndex,index,classRange,clsId,classStatus);
			}
		}
	}
</script>

<style lang='scss' scoped>
	.restView{
		font-size: $font-size26;
		color: $pss-text-colora;
		text-align: center;
		padding-bottom: 30rpx;
		.restImg{
			width:360rpx;
			height: 146rpx;
			margin-bottom: 20rpx;
		}
	}
	.restTag{
		font-size: $font-size30;
		color: $pss-text-color8;
		line-height: 60rpx;
	}
	.dayItem{
		display: flex;
		margin-bottom: 10rpx;
		.dayTit{
			width: 70rpx;
			line-height: 60rpx;
			font-size: $font-size30;
			color: $pss-text-color3;
			margin-right: 15rpx;
			flex-shrink: 0;
		}
		.timeStepList{
			width: 87%; 
			/* display: flex;
			flex-wrap: wrap;
			justify-content: space-between; */
			.timeStepItem{
				float: left;
				border-radius: 50rpx;
				width: 180rpx;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				background: $pss-bg-gray;
				color: $pss-text-color3;
				font-size: $font-size26;
				margin-bottom: 20rpx;
				&:nth-of-type(3n){
					float: right;
				}
				&:nth-of-type(3n-1){
					margin-left: 18rpx;
				}
				&.active{
					background: $pss-color-primary_1;
					color: $pss-colorFFF;
				}
				&.hasFull,
				&.rest{
					background: $pss-bg-gray;
					color: $pss-text-colord;
					&.active{
						background: $pss-bg-gray;
						color: $pss-text-colord;
					}
				}
			}
		}
	}
	.timeList{
		display: flex;
		justify-content: space-between;
		margin-bottom: 30rpx;
		.timeItem{
			width: 86rpx;
			height: 86rpx;
			background: $pss-bg-yellow;
			border-radius: 10rpx;
			color: $pss-color-primary_1;
			font-size: $font-size22;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: flex-end;
			.week{
				font-size: $font-size30;
				margin-right: 12rpx;
			}
			.date{
				margin-right: 12rpx;
			}
			&.active{
				background: $pss-color-primary_1;
				color: $pss-colorFFF;
				font-weight: bold;
			}
			&.hasFull,
			&.rest{
				background: $pss-bg-gray;
				color: $pss-text-colord;
				&.active{
					background: $pss-color-primary_1;
					color: $pss-colorFFF;
					font-weight: bold;
				}
			}
		}
	}
</style>